// 比赛卡片组件

import React from 'react';
import type { Match } from '../../../types/match';
import './MatchCard.css';

interface MatchCardProps {
  match: Match;
}

/**
 * 比赛卡片组件
 * 显示单场比赛的详细信息
 */
const MatchCard: React.FC<MatchCardProps> = ({ match }) => {
  // 格式化比赛时间
  const formatMatchTime = (timeString: string) => {
    const date = new Date(timeString);
    return {
      date: date.toLocaleDateString('zh-CN', {
        month: '2-digit',
        day: '2-digit'
      }),
      time: date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      })
    };
  };

  // 获取主要投注信息
  const mainBetting = match.bettings?.[0];

  const { date, time } = formatMatchTime(match.matchTime);

  return (
    <div className="match-card">
      {/* 比赛时间和联赛 */}
      <div className="match-card__header">
        <div className="match-card__time">
          <span className="match-card__date">{date}</span>
          <span className="match-card__clock">{time}</span>
        </div>
        <div className="match-card__league">{match.leagueName}</div>
      </div>

      {/* 比赛队伍 */}
      <div className="match-card__teams">
        <div className="match-card__team">
          {match.homeTeamLogo && (
            <img 
              src={match.homeTeamLogo} 
              alt={match.homeTeam}
              className="match-card__team-logo"
            />
          )}
          <span className="match-card__team-name">{match.homeTeam}</span>
        </div>
        
        <div className="match-card__vs">VS</div>
        
        <div className="match-card__team">
          {match.awayTeamLogo && (
            <img 
              src={match.awayTeamLogo} 
              alt={match.awayTeam}
              className="match-card__team-logo"
            />
          )}
          <span className="match-card__team-name">{match.awayTeam}</span>
        </div>
      </div>

      {/* 投注信息 */}
      {mainBetting && (
        <div className="match-card__betting">
          <div className="match-card__handicap">
            {mainBetting.beidanHandicap && (
              <span className="handicap-info">
                让球: {mainBetting.beidanHandicap}
              </span>
            )}
            {mainBetting.beidanNumber && (
              <span className="beidan-number">
                北单: {mainBetting.beidanNumber}
              </span>
            )}
          </div>
          
          <div className="match-card__odds">
            <div className="odds-item">
              <span className="odds-label">胜</span>
              <span className="odds-value">{mainBetting.winOdds}</span>
            </div>
            <div className="odds-item">
              <span className="odds-label">平</span>
              <span className="odds-value">{mainBetting.drawOdds}</span>
            </div>
            <div className="odds-item">
              <span className="odds-label">负</span>
              <span className="odds-value">{mainBetting.loseOdds}</span>
            </div>
          </div>
        </div>
      )}

      {/* 推荐和备注 */}
      {(match.boldRecommendation !== 'none' || match.remarks) && (
        <div className="match-card__footer">
          {match.boldRecommendation !== 'none' && (
            <div className="match-card__recommendation">
              推荐: {match.boldRecommendation}
            </div>
          )}
          {match.remarks && (
            <div className="match-card__remarks">
              备注: {match.remarks}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default MatchCard;